<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>

  <h2>localStorage</h2>
  <button onclick="saveData()">点我保存一个数据</button>
  <button onclick="readData()">点我读取一个数据</button>
  <button onclick="deleteData()">点我删除一个数据</button>
  <button onclick="deleteAllData()">点我清空数据</button>

  <script type="text/javascript">
    let p = { name: 'zs', age: 18 }
    function saveData() {
      localStorage.setItem('msg', 'hello')
      localStorage.setItem('msg2', 666)
      localStorage.setItem('person', JSON.stringify(p))

    }

    function readData() {
      console.log(localStorage.getItem('msg'))
      console.log(localStorage.getItem('msg2'))

      const result = localStorage.getItem('person')
      console.log(JSON.parse(result))
    }

    function deleteData() {
      localStorage.removeItem('msg2')
    }

    function deleteAllData() {
      localStorage.clear()
    }

  </script>

</body>

</html>